<template>
  <div class="login">
    <div
      class="header-bar"
      @click.stop="openNewPage('https://www.bimcc.com')"
      style="background-color: #fff !important"
    >
      <span class="logo-icon" :style="{ backgroundImage: 'url(\'' + state.logo + '\')' }"></span>
      <span>{{ state.systemName }}</span>
    </div>
    <!--主体部分登录-->
    <div class="login-main" :style="{ backgroundImage: 'url(\'' + state.backImage + '\')' }">
      <div>
        <!--这里应该是要放张图片-->
      </div>
      <div class="login-area" v-show="state.mainTab === 'login'">
        <!--输入方式登录-->
        <div v-show="state.loginMethod === 1">
          <div class="tab-nav">
            <span :class="[{ activeTab: state.activeTab === 1 }]" @click="changeMethod(1)"
              >密码登录</span
            >
            <!-- <span :class="[{ activeTab: state.activeTab === 2 }]" @click="changeMethod(2)"
              >短信登录 / 注册</span
            > -->
            <div class="login-method" @click.stop="codeLogin(2)"></div>
          </div>
          <div class="login-form">
            <login-form
              :activeTab="state.activeTab"
              ref="loginForm"
            ></login-form>
            <div class="else-tip">
              <!-- <div v-show="state.activeTab === 1" @click="forgetPassword">忘记密码？</div> -->
              <div v-show="state.activeTab === 2">接收语音验证码</div>
            </div>
          </div>
        </div>
        <!--二维码扫描方式登录-->
        <div v-show="state.loginMethod === 2">
          <div class="tab-nav">
            <span class="code-no-border">微信二维码登录</span>
            <div class="login-method qr-code" @click.stop="codeLogin(1)"></div>
          </div>
          <div class="login-form">
            <div class="code-method">
              <img
                :src="state.loginQrcode"
                alt=""
                width="160px"
                height="160px"
                @click="getQrcode"
              />
              <p>打开微信，扫描二维码登录</p>
            </div>
          </div>
        </div>
      </div>
      <!--//忘记密码-->
      <div v-if="state.mainTab === 'password'" class="password-area">
        <div class="pass-title">
          <span class="back-icon" @click="state.mainTab = 'login'"></span>忘记密码及重置
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { reactive, onMounted, watch, ref } from 'vue'
import LoginForm from './loginForm'
import { useRouter } from 'vue-router'
import { dataInterfaces } from '@/apis/login/login'
import { setToken } from '@/utils/token-cache'
import { ElMessage } from 'element-plus'
import { userStore } from '@/store/user'
// import { getToken } from '@/utils/token-cache'

const companyUserId = ref()
const $store = userStore()
const state = reactive({
  // 登录框中的变量
  activeTab: 1, //1为密码登录，2为短信登录
  loginMethod: 1, //1输入方式，2为扫描方式

  logo: 'https://static.bimcc.net/logo/logo1.png',
  backImage: 'https://static.bimcc.net/images/bg_logo.png',
  //底部信息变量
  linkInfo: [
    {
      name: '关于我们',
      url: 'https://www.bimcc.cn/about-us/'
    },
    {
      name: '用户协议'
    },
    {
      name: '隐私协议'
    },
    {
      name: '帮助文档'
    }
  ],
  callUs: [
    {
      name: '023-68682379',
      imgPath: 'iconweb_phone'
    },
    {
      name: 'info@bimcc.com',
      imgPath: 'iconweb_mail'
    },
    {
      name: '314680371',
      imgPath: 'iconweb_qq',
      flag: true
    },
    {
      name: '760600115',
      imgPath: 'iconweb_qqqun',
      flag: true
    }
  ],
  systemName: '筑云管理平台', //系统名字
  //二维码登录变量
  loginQrcode: '',
  code: '',
  showQrcode: false,
  timer: '',
  ip: '',
  domain: document.domain,
  copyrightShow: 0,
  //忘记密码
  mainTab: 'login'
})
/**
 * @desc: 忘记密码
 */
const forgetPassword = () => {
  state.mainTab = 'password'
}
/**
 * @desc: 返回登录
 */
const doBackLogin = () => {
  state.mainTab = 'login'
}
/**
 *
 * @desc: 切换登录方式
 */
const changeMethod = (num) => {
  state.activeTab = num
  if (num === 2) {
    state.activeTab = 2
  }
}
/**
 *
 * @desc: 切换登录方式
 */
// const router = useRouter()
// const handleSubmit = ({ userName, password, code, phoneNumber }) => {
//   state.loginLoading = true
//   let payload = null
//   if (state.activeTab === 1) {
//     // 账号密码
//     payload = {
//       password: password,
//       name: userName
//     }
//   } else if (state.activeTab === 2) {
//     // 验证码
//     payload = {
//       phone: phoneNumber,
//       code: code,
//       loginType: 'phone'
//     }
//   }

//   let params = {
//     __method_name__: 'globalFunctionCall',
//     typeName: 'LoginFuncClass',
//     type: 'behavior',
//     funcName: 'LoginBehavior',
//     payload
//   }
//   dataInterfaces(params)
//     .then((res) => {
//       state.loginLoading = false
//       if (res && res.code === 200) {
//         setToken(res.data.token)
//         ElMessage({ type: 'success', message: '登录成功' })
//         const userInfo = res.data
//         if (+userInfo.is_update_pwd === 0) {
//           ElMessage({ type: 'error', message: '密码不符合规则，将跳转修改密码页面' })
//           setTimeout(() => {
//             router.push({
//               name: 'PersonalCenter',
//               query: {
//                 unBackFlag: true
//               }
//             })
//           }, 3000)
//         } else {
//           router.push({ name: 'HomePage' })
//         }
//         companyUserId.value = res.data.is_company_world
//         getUserData()
//         localStorage.setItem('userInfo', JSON.stringify(userInfo))
//       } else {
//         ElMessage({ type: 'error', message: res.msg })
//         return
//       }
//     })
//     .catch((err) => {
//       ElMessage({ type: 'error', message: '登录失败11' })
//     })
// }
</script>

<style scoped lang="less">
@import './login.scss';
.margin-r {
  margin-right: 32px;
  cursor: pointer;
}
.login {
  position: relative;
  overflow: hidden;
  height: 100%;
  width: 100%;
  background: #f2f3f5;
}




</style>
